<template>
	<view
		style="margin-top: 0.5rem;background-image: url('/static/bg/xinren.png');background-size: 100% 100%;height: 2.5rem;">
		<view style="line-height: 3rem;font-size: 24rpx;padding-left: 17%;color: #FF9D7D;">
			<span style="color: #000;">新人专享优惠</span><span style="margin: 0 2%;">|</span>
			<span>下单立减6元</span>
			<view style="float: right;padding-right: 4%;">
				<uv-count-down :time="60 * 60 * 1000" format="HH:mm:ss" autoStart millisecond
					@change="UvCountDown">
					<view class="time">
						<text class="time-item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>:
						<text class="time-item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes }}</text>:
						<text class="time-item">{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds }}</text>
					</view>
				</uv-count-down>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timeData: {},
			}
		},
		methods: {
			UvCountDown(e) {
				this.timeData = e
			}
		}
	}
</script>

<style>

	.time-item {
		color: #de3d24;
		background-color: #edbfba;
		padding: 0 5rpx;
		border-radius: 10px;
	}
</style>